<template>
	<view class="container">
		<u-navbar title-size="34" :isBack="false" :back-icon="false" :border-bottom="false" placeholder>
			<view class="slot-wrap">
				<view class="d-flex align-items-center justify-content-center title-tab">
					<u-tabs :list="titleList" :bar-style="titleBarStyle" :active-item-style="activeStyle"
						:gutter="gutter" :bold="true" active-color="#292940" font-size="32" inactive-color="#333447"
						bar-width="25" v-model="titleCurrent" @change="titleChange"></u-tabs>
				</view>
			</view>
		</u-navbar>
		<view v-if="titleCurrent == 0">
			<u-tabs :list="categoryList" :bar-style="barStyle" :active-item-style="activeStyle" :gutter="gutter"
				:bold="true" active-color="#292940" font-size="30" inactive-color="#292940" bar-width="25" bar-height="8"
				height="92" v-model="currentTabs" @change="change"></u-tabs>
		</view>
		<view v-else>
			<u-tabs :list="BlindList" :bar-style="barStyle" :active-item-style="activeStyle" :gutter="gutter"
				:bold="true" active-color="#292940" font-size="30" inactive-color="#292940" bar-width="25" bar-height="8"
				height="92" v-model="currentBlind"></u-tabs>
		</view>
		<view v-if="titleCurrent == 0">
			<scroll-view scroll-y class="scroll-box" :style="{'--percent':navHeight + 'px'}"
			refresher-background="#F8F9FA" :refresher-enabled="true" @refresherrefresh="onWorkRefresh"
			@refresherpulling="onWorkPull" @refresherrestore="onWorkReset" :refresher-triggered="workRefresh"
			@scrolltolower="workBottom">
				<scroll-view style="width: 100%; white-space: nowrap" scroll-x="true" scroll-with-animation
					:scroll-into-view="scrollViewId" v-if="albumList.length > 0">
					<view class="creation-list d-flex align-items-center">
						<view v-for="(item,index) in albumList">
							<view @tap="selective(index)" :id="`id_${index}`" :key="index" :data-current="index"
								@tap.stop="swichNav"
								class="text-343A40 creation-title-list d-flex justify-content-between align-items-center">
								<view :class="{'active':isSelective === index,'mgr-12':index == albumList.length -1}"
									class="creation-name fz-28 ">{{item.name}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view style="height: 40upx;width: 100%;" v-else></view>
				<view class="padding-wrap draft-title  d-flex justify-content-between align-items-center">
					<view class="d-flex align-items-center">
						<view class="text-999BA8 fz-28">共有
							<span class="px-1">{{total || 0}}</span>作品
						</view>
					</view>
					<view class="filter-icon" @click="popShow = true">
						<image src="/static/market/filter-def-big.png" v-if="keyword === ''"></image>
						<image src="/static/market/filter-sel-big.png" v-else></image>
					</view>
				</view>
				<view class="padding-wrap creation-box d-flex justify-content-between">
					<view class="creation-item" v-for="item in worksList" @tap="toDetail(item)">
						<view class="position-relative">
							<view class="creation-cover">
								<image :src="item.cover" mode="aspectFill" v-if="item.type != 1"></image>
								<image :src="item.file" mode="aspectFill" v-else></image>
							</view>
							<view
								class="position-absolute d-flex align-items-center font-DIN creation-quantity text-1EF7FE fz-24">
								{{item.user_works_count}}</view>
						</view>
						<view class="creation-item-title text-292940 fz-28">{{item.name}}</view>
					</view>
				</view>
				<view class="loadmore-style">
					<u-loadmore :status="status" v-show="moreShow" margin-top="50" />
				</view>
				<view class="no-works pt-4" v-show="total === 0 && !moreShow">
					<image src="../../static/market/no-works.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">空空如也~</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="titleCurrent == 1">
			<scroll-view scroll-y class="scroll-box" :style="{'--percent':navHeight + 'px'}"
			refresher-background="#F8F9FA" :refresher-enabled="true" @refresherrefresh="onBoxRefresh"
			@refresherpulling="onBoxPull" @refresherrestore="onBoxReset" :refresher-triggered="boxRefresh"
			@scrolltolower="boxBottom">
				<view class="padding-wrap pt-3 creation-box d-flex justify-content-between">
					<view class="creation-item" v-for="item in boxList" @tap="toBoxDetail(item)">
						<view class="position-relative">
							<view class="creation-cover">
								<image :src="item.blind_box.cover_url" mode="aspectFill"></image>
							</view>
							<view
								class="position-absolute d-flex align-items-center font-DIN creation-quantity text-1EF7FE fz-24">
								{{item.count}}</view>
						</view>
						<view class="creation-item-title text-292940 fz-28">{{item.blind_box.name}}</view>
					</view>
				</view>
				<view class="loadmore-style">
					<u-loadmore :status="boxStatus" v-show="boxMoreShow" margin-top="50" />
				</view>
				<view class="no-works pt-4" v-show="boxTotal === 0 && !boxMoreShow">
					<image src="../../static/market/no-works.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">空空如也~</view>
				</view>
			</scroll-view>
		</view>
		<u-popup v-model="popShow" mode="center" border-radius="16" closeable @close="popClose">
			<view class="scr-main">
				<u-search class="mt-4" height="70" clearabled placeholder="搜索作品" :show-action="false" v-model="keyword">
				</u-search>
				<view class="ipt-box"></view>
				<view class="ipt-box">
					<u-button type="button" throttle-time="0" class="ipt-btn" @tap="reSet">重置</u-button>
					<u-button type="button" class="ipt-btn search" @tap="popClose(1)">搜索
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTabs: 0,
				current: 0,
				barStyle: {
					background: 'linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%)',
					borderRadius: '3px',
				},
				activeStyle: {
					fontWeight: 600,
					fontSize: '34upx',
				},
				albumList: [],
				popShow: false,
				moreShow: false,
				status: 'loading',
				total: '',
				page: 1,
				worksList: [],
				keyword: '',
				searchKeyword: '',
				isSelective: '',
				scrollViewId: "id_0",
				category_id: '', //类型ID
				album_id: '', //专辑ID
				gutter: 40,
				titleList: [{
					name: '数字藏品'
				}, {
					name: '盲盒'
				}],
				titleCurrent: 0,
				titleBarStyle: {
					background: 'linear-gradient(135deg,rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%)',

				},
				BlindList: [{
					name: '全部'
				}],
				currentBlind: 0,
				boxMoreShow: false,
				boxStatus: 'loading',
				boxPage: 1,
				boxTotal: 0,
				boxList: [],
				workRefresh:false,
				boxRefresh: false,
			}
		},
		onLoad() {
			if (this.USER) {
				if(!this.isRefresh){
					this.getUserBoxList()
					this.getAlbumList()
				}
				this.navHeight = this.tui.navBarHeight + 44
			}
		},
		onShow() {
			if (!this.USER) {
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}, 100)
			} else {
				//是否刷新藏品
				if (this.isRefresh) {
					if(this.albumList.length == 0){
						this.$store.dispatch('user/userAlbums').then(res => {
							this.albumList = res.data
						})
					}
					//处理跳转
					setTimeout(()=>{
						if(this.noCurrent == 0){
							this.titleCurrent = 0
						}else{
							this.titleCurrent = 1
						}
					},100)
					this.currentTabs = 0
					this.current = 0
					this.keyword = ''
					this.searchKeyword = ''
					this.isSelective = ''
					this.category_id = ''
					this.album_id = ''
					this.$store.commit('works/SET_ISREFRESH', false)
					this.reSetList()
					this.reSetBoxList()
				}
			}
		},
		computed: {
			USER() {
				// return this.$store.state.auth.USER
			return	{
					airdrops_count:2,name:"一只藏品",ID:'237cbb'
				}
				
				
			},
			//类型列表
			categoryList() {
				let arr = this.$store.state.works.categoryList
				arr.unshift({
					id: '',
					name: '全部'
				})
				return arr
			},
			isRefresh() {
				return this.$store.state.works.isRefresh
			},
			noCurrent(){
				return this.$store.state.works.titleCurrent
			}
		},
		methods: {
			onWorkPull(){
				this.workRefresh = 'restore'
			},
			onWorkRefresh(){
				this.reSetList()
			},
			onWorkReset(){
				this.workRefresh = 'restore';
			},
			workBottom(){
				this.moreShow = false
				if (this.worksList.length < this.total) {
					this.page++
					this.getWorksList()
				} else {
					this.status = 'nomore'
					this.moreShow = true
				}
			},
			onBoxPull(){
				this.boxRefresh = 'restore'
			},
			onBoxRefresh(){
				this.reSetBoxList()
			},
			onBoxReset(){
				this.boxRefresh = 'restore';
			},
			boxBottom(){
				this.boxMoreShow = false
				if (this.boxList.length < this.boxTotal) {
					this.boxPage++
					this.getUserBoxList()
				} else {
					this.boxStatus = 'nomore'
					this.boxMoreShow = true
				}
			},
			//我的盲盒列表
			getUserBoxList() {
				this.boxMoreShow = true
				this.boxStatus = 'loading'
				this.$store.dispatch('user/userBoxList', { page: this.boxPage }).then(res => {
					this.boxRefresh = false
					this.boxTotal = res.data.total
					if(this.boxPage == 1){
						this.boxList = res.data.data
					}else{
						this.boxList = [...this.boxList, ...res.data.data]
					}
					if (this.boxList.length == this.boxTotal && this.boxList.length >= 4) {
						this.boxStatus = 'nomore'
					} else {
						this.boxMoreShow = false
					}
				}).catch(error => {
					this.boxRefresh = false
					this.boxMoreShow = false
				})
			},
			//前往藏品详情
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/secondary/collection/index?work_id=${item.id}`
				})
			},
			// 前往盲盒详情
			toBoxDetail(item) {
				uni.navigateTo({
					url: `/pages/secondary/collection/Blind-box?box_id=${item.blind_box_id}&user_box_id=${item.id}`
				})
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.current == cur) {
					return false;
				} else {
					this.current = cur;
					this.checkCor();
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.current > 2) {
					this.scrollViewId = `id_${this.current - 2}`;
				} else {
					this.scrollViewId = `id_0`;
				}
			},
			//获取类型列表
			getCategory() {
				this.$store.dispatch('works/category').then(res => {})
			},
			//我的藏品的专辑列表
			getAlbumList() {
				this.$store.dispatch('user/userAlbums').then(res => {
					this.albumList = res.data
					this.getWorksList()
				})
			},
			//重置藏品列表并请求接口
			reSetList() {
				this.page = 1
				this.total = ''
				this.worksList = []
				this.getWorksList()
			},
			//重置盲盒列表并请求接口
			reSetBoxList() {
				this.boxPage = 1
				this.boxTotal = ''
				this.boxList = []
				this.getUserBoxList()
			},
			//获取藏品列表
			getWorksList() {
				this.moreShow = true
				this.status = 'loading'
				let param = {
					category_id: this.category_id,
					album_id: this.album_id,
					name: this.keyword,
					page: this.page
				}
				this.$store.dispatch('user/userWorksList', param).then(res => {
					this.workRefresh = false
					this.searchKeyword = this.keyword
					this.total = res.data.total
					if(this.page == 1){
						this.worksList = res.data.data
					}else{
						this.worksList = [...this.worksList, ...res.data.data]
					}
					if (this.worksList.length == this.total && this.worksList.length >= 4) {
						this.status = 'nomore'
					} else {
						this.moreShow = false
					}
				}).catch(error => {
					this.workRefresh = false
					this.moreShow = false
				})
			},
			//关闭搜索图层，判断搜索关键字是否改变，如果改变则清空列表并请求接口
			popClose(val) {
				if ((this.keyword !== this.searchKeyword) || val == 1) {
					this.popShow = false
					this.reSetList()
				}
			},
			//重置
			reSet() {
				this.keyword = ''
			},
			//切换类型
			change(index) {
				this.current = index
				if (this.current > 0) {
					this.gutter = 44
				} else {
					this.gutter = 40
				}
				this.category_id = this.categoryList[this.current].id
				this.reSetList()
			},
			titleChange(index) {
				this.titleCurrent = index
				this.$store.commit('works/SET_TITLECURRENT',this.titleCurrent)
			},
			//选择专辑筛选
			selective(index) {
				if (this.isSelective !== index) {
					this.isSelective = index
					this.album_id = this.albumList[this.isSelective].id
				} else {
					this.isSelective = ''
					this.album_id = ''
				}
				this.reSetList()
			},
			toBlind() {
				uni.navigateTo({
					url: '/pages/secondary/collection/Blind-box'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background: #F8F9FB;
		position: fixed;
		top: 0;
		left: 0;
		/* #ifdef APP-PLUS */
		min-height:100vh;
		/* #endif */
		/* #ifdef H5 */
		min-height: calc(100vh - 50px);
		/* #endif */
	}

	.slot-wrap {
		width: 100%;
	}

	.title-tab {
		width: 100%;
		/deep/.u-tab-item{
			font-size: 32upx;
		}
	}

	.creation-list {
		height: 120upx;
		background: #F8F9FB;

		.creation-title-list {

			.creation-name {
				width: 162upx !important;
				height: 60upx;
				background: #F0F2F5;
				border-radius: 30upx;
				padding: 0 24upx;
				box-sizing: border-box;
				// margin-right: 24upx;
				margin-left: 24upx;
				text-align: center;
				line-height: 60upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.active {
				background: #292940;
				color: #ffffff;
			}

			.mgr-12 {
				margin-right: 24upx;
			}
		}

	}

	.padding-wrap {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.draft-title {
		padding-bottom: 22upx;
	}

	.filter-icon {
		width: 28upx;
		height:31upx;

		image {
			width: 28upx;
			height: 31upx;
		}
	}

	.creation-box {
		flex-wrap: wrap;
		box-sizing: border-box;

		.creation-item {
			width: 337upx;
			height: 420upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102, 105, 120, 0.2), 0px 4upx 12upx -6upx rgba(154, 166, 219, 0.1);
			border-radius: 10upx;
			margin-bottom: 24upx;
			overflow: hidden;

			.creation-cover {
				width: 337upx;
				height: 337upx;

				image {
					width: 337upx;
					height: 337upx;
				}
			}

			.creation-quantity {
				display: inline-block;
				height: 36upx;
				padding: 0 12upx;
				background: rgba(41, 41, 64, 0.5);
				border-radius: 20upx 0px 0px 0px;
				bottom: 0;
				right: 0;
			}

			.creation-item-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 0 10upx;
				box-sizing: border-box;
				line-height: 83upx;
			}
		}
	}

	.scr-main {
		width: 690upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		transition: 0.3s;
		padding: 40upx 30upx 30upx 30upx;
		overflow: hidden;
		border-radius: 0 0 16upx 16upx;

		.title {
			padding: 20upx 0 29upx 0;
		}

		.document-item {
			display: inline-block;
			min-width: 200upx;
			height: 64upx;
			line-height: 64upx;
			border-radius: 6upx;
			border: 2upx solid #DEE2E6;
			text-align: center;
			margin-bottom: 28upx;
		}

		.ipt-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			margin-bottom: 50upx;

			button {
				width: 290upx;
				height: 80upx;
				background: #E9ECEF;
				border-radius: 8upx;
				font-size: 28upx;
				color: #7B809A;
				text-align: center;
				line-height: 80upx;
				border: none !important;
			}

			.search {
				background-color: #292940;
				color: #ffffff;
			}
		}
	}

	.height-auto {
		height: auto !important;
	}

	.no-works {
		margin: 50upx auto;
		text-align: center;

		image {
			width: 300upx;
			height: 300upx;
		}
	}
	.loadmore-style {
		padding-bottom: 30upx;
	}
	.scroll-box {
		//      高度计算 100vh -navbar动态高度 - tabs高度 - tabbar高度50px 
		/* #ifdef H5 */
		height: calc(100vh - 44px - 100upx - 50px) !important;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh - var(--percent) - 100upx) !important;
		/* #endif */
		overflow: hidden;
		box-sizing: border-box;
	}
	/deep/ .title-tab .u-tab-item{
		line-height: 120upx !important;
	}
</style>
